<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <!---Read only section. Source panel edits to these document properties will not be persisted-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Connect WebVI to WebSocket Echo Server</title>
        <!---End read only section. Additional scripts or document properties can be added outside this section-->
        <link href="ni-webvi-resource-v0/favicon.ico" type="image/x-icon" rel="icon">
<link href="ni-webvi-resource-v0/Web/dist/Styles/niBase.DeployedRun.min.css" type="text/css" rel="stylesheet">
<script src="ni-webvi-resource-v0/BrowserDetection.js" type="text/javascript" nomodule=""></script>
<script src="ni-webvi-resource-v0/DeployedRun.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/VireoImport.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/ResourceLoadDetection.js" defer=""></script>
<style ni-autogenerated-style-id="">
		/* Read only section. Source panel edits to the content of this style tag will not be persisted */
        [ni-control-id='2'] { --ni-background: rgba(255,255,255,1); --ni-border-width: 0px 0px 0px 0px; height: 1024px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 30px 30px 30px 30px; width: 1024px; --ni-max-width: none; }
        .ni-front-panel-wrapper { min-width: 1024px; }
        [ni-control-id='3'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 16px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 28px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='4'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 100px; left: 16px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 48px; width: 972px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='5'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 192px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 696px; height: 184px; }
        [ni-control-id='6'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 16px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: center; --ni-text-align: center; top: 54px; font-size: 48px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 972px; height: 64px; }
        [ni-control-id='7'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,173,239,1); height: 40px; left: 32px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 150px; width: 552px; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='9'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 32px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 131px; width: auto; font-size: 11px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='8'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; --ni-overflow-x: hidden; left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 389px; --ni-overflow-y: auto; width: 280px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='11'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 369px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='10'] { --ni-border-color: rgba(168,171,174,1); --ni-border-width: 0px 0px 0px 0px; --ni-false-foreground-color: rgba(255,0,0,1); --ni-foreground-color: rgba(255,0,0,1); height: 24px; left: 500px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 389px; --ni-true-foreground-color: rgba(255,0,0,1); width: 104px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='13'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 500px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 369px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='12'] { --ni-border-color: rgba(168,171,174,1); --ni-border-width: 0px 0px 0px 0px; --ni-false-foreground-color: rgba(255,0,0,1); --ni-foreground-color: rgba(255,0,0,1); height: 24px; left: 628px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 389px; --ni-true-foreground-color: rgba(255,0,0,1); width: 104px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='15'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 628px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 369px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='14'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; --ni-overflow-x: hidden; left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 439px; --ni-overflow-y: auto; width: 280px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='17'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 419px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='16'] { --ni-border-color: rgba(168,171,174,1); --ni-border-width: 0px 0px 0px 0px; --ni-false-foreground-color: rgba(43,48,51,1); --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 500px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 439px; --ni-true-foreground-color: rgba(255,255,255,1); width: 104px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='19'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 500px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 419px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='18'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 250px; left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 501px; width: 536px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='25'], [ni-control-id='25'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 10px; --ni-overflow-x: hidden; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 0px; --ni-overflow-y: auto; width: 10px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='26'], [ni-control-id='26'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 10px; --ni-overflow-x: hidden; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 0px; --ni-overflow-y: auto; width: 10px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='24'], [ni-control-id='24'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 10px; --ni-overflow-x: hidden; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 0px; --ni-overflow-y: auto; width: 10px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='23'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 196px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 481px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
		/* End read only section. To add additional styles, add a new style tag after this one. */</style>

    
</head>

    <body><ni-web-application location="BROWSER" engine="VIREO" vireo-source="index.via.txt" wasm-url="ni-webvi-resource-v0/node_modules/vireo/dist/wasm32-unknown-emscripten/release/vireo.core.wasm"><ni-virtual-instrument vi-name="WebApp::index.gviweb"></ni-virtual-instrument></ni-web-application>
        <div id="ni-outdated-browser-message" style="display:none">This browser is missing features needed to run this web application. Open this web application in a supported browser.</div>
        <div id="ni-failed-to-load-vireo-source" style="display:none">
            <div id="ni-failed-to-load-vireo-message-title">
                Unable to load resource file
            </div>
            <div id="ni-failed-to-load-vireo-message-body">
                Verify all WebVI files are available and served using an HTTP server or use a browser that can load files directly from the file system. See <a href="http://digital.ni.com/express.nsf/bycode/HOSTWEBAPP">Hosting a Web Application on a Server</a>                for more information.
            </div>
        </div>
        <div class="ni-front-panel-wrapper" vi-ref="" ni-control-id="FrontPanelWrapper">
            <ni-front-panel control-resize-mode='fixed' layout='absolute' ni-control-id='2'>

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

            
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='3' text='banner'></ni-label>
            <ni-url-image alternate='' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Banner", "dco": 7, "isLatched": false, "prop": "source", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' follower-ids='["3"]' href='' label-alignment='top-left' label-id='3' ni-control-id='4' read-only='true' source='data:image/svg+xml,%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20fill=%22%23044123%22/%3E%3C/svg%3E' stretch='uniform' target='_self'></ni-url-image>
            <ni-text control-resize-mode='fixed' ni-control-id='5' text='This example uses the WebSocket API to connect to the WebSocket Echo Server hosted by websocket.org. The WebVI connects to the server, sends a message, and receives the same message from the server. 

To run this example, complete the following steps:
1. Click the Connect button.
2. Enter a message and click the Send Message button. The Echo Server responds with the same message.

Note: WebVIs that are hosted on a web server that is secure (https://) can only connect to WebSocket servers that are secure (wss://). WebVIs hosted on on a web server that is insecure (http://) may connect to WebSocket servers that are either secure (wss://) or insecure (ws://).'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='6' text='Connect WebVI to WebSocket Echo Server'></ni-text>
            <ni-hyperlink binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_HyperlinkControl", "dco": 0, "isLatched": false, "prop": "href", "sync": false, "unplacedOrDisabled": true}' content='Learn more about this example at github.com/ni/webvi-examples' control-resize-mode='fixed' follower-ids='["9"]' href='https://github.com/ni/webvi-examples' label-alignment='top-left' label-id='9' ni-control-id='7' target='_self'></ni-hyperlink>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='9' text='Hyperlink Control'></ni-label>
            <ni-string-control accepts-return='true' binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_WebSocketServerUrl", "dco": 4, "isLatched": false, "prop": "text", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' escaped-display-mode='default' follower-ids='["11"]' label-alignment='top-left' label-id='11' ni-control-id='8' text='wss://echo.websocket.org/'></ni-string-control>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='11' text='WebSocket Server Url'></ni-label>
            <jqx-toggle-button binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Connect", "dco": 5, "isLatched": true, "prop": "value", "sync": false, "unplacedOrDisabled": false}' click-mode='release' content-visible='true' control-resize-mode='fixed' follower-ids='["13"]' glyph-content='' label-alignment='top-left' label-id='13' ni-control-id='10' text-content='Connect'></jqx-toggle-button>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='13' text='Connect'></ni-label>
            <jqx-toggle-button binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Disconnect", "dco": 3, "isLatched": true, "prop": "value", "sync": false, "unplacedOrDisabled": false}' click-mode='release' content-visible='true' control-resize-mode='fixed' follower-ids='["15"]' glyph-content='' label-alignment='top-left' label-id='15' ni-control-id='12' text-content='Disconnect'></jqx-toggle-button>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='15' text='Disconnect'></ni-label>
            <ni-string-control accepts-return='true' binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Message", "dco": 1, "isLatched": false, "prop": "text", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' escaped-display-mode='default' follower-ids='["17"]' label-alignment='top-left' label-id='17' ni-control-id='14' text=''></ni-string-control>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='17' text='Message'></ni-label>
            <jqx-toggle-button binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Send", "dco": 2, "isLatched": true, "prop": "value", "sync": false, "unplacedOrDisabled": false}' click-mode='release' content-visible='true' control-resize-mode='fixed' follower-ids='["19"]' glyph-content='' label-alignment='top-left' label-id='19' ni-control-id='16' text-content='Send Message'></jqx-toggle-button>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='19' text='Send'></ni-label>
            <ni-data-grid binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Messages", "dco": 6, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": true}' column-header-visible='true' control-resize-mode='fixed' follower-ids='["23"]' label-alignment='top-left' label-id='23' ni-control-id='18' ni-type='{"name": "Array", "rank": 1, "subtype": {"fields": ["Source", "Time", "Message"], "name": "Cluster", "subtype": ["String", "String", "String"]}}' row-height='26' value='[]'>
                <ni-data-grid-column field-name='Time' header='Time' index='1' ni-control-id='21' width='150px'>
                    <ni-string-control control-resize-mode='fixed' escaped-display-mode='default' ni-control-id='25' text=''></ni-string-control>
                </ni-data-grid-column>
                <ni-data-grid-column field-name='Message' header='Message' index='2' ni-control-id='22' width='250px'>
                    <ni-string-control control-resize-mode='fixed' escaped-display-mode='default' ni-control-id='26' text=''></ni-string-control>
                </ni-data-grid-column>
                <ni-data-grid-column field-name='Source' header='Source' index='0' ni-control-id='20' width='auto'>
                    <ni-string-control control-resize-mode='fixed' escaped-display-mode='default' ni-control-id='24' text=''></ni-string-control>
                </ni-data-grid-column>
            </ni-data-grid>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='23' text='Messages'></ni-label>
        </ni-front-panel>
        </div>
    </body>

</html>